<ion-view view-title="加载图标">
    <ion-nav-buttons side="left">
        <button ui-sref="home" class="button button-positive icon ion-chevron-left"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button ng-click="vc.showProgress()" class="button button-positive icon fa fa-upload"></button>
    </ion-nav-buttons>
	
	<ion-content class="has-header">
		<div class="card" style="margin:0;">
			<div class="item item-divider">
				<i class="fa fa-fw fa-user"></i> 上传头像
			</div>
			<div class="item" style="height:130px">
				<div ng-click="vc.percentTimer()" class="circle" ng-style="{background:vo.percent==100?'#ccc':'#32cd32'}">
					<div class="pie_left" ng-style="{transform:vo.percent>50?'rotate('+(vo.percent-50)*3.6+'deg)':'rotate(0deg)'}"></div>
					<div class="pie_right" ng-style="{background:vo.percent>50&&vo.percent!=100?'#32cd32':'#ccc',transform:vo.percent<=50?'rotate('+vo.percent*3.6+'deg)':'rotate(0deg)'}"></div>
					<div ng-style="{'background-image':vo.percent==100?'url(images/head.jpg)':'url(images/common/head.jpg)'}" class="mask"><span ng-show="vo.percent!=100&&vo.percent!=0">{{vo.percent}}%</span></div>
				</div>
				<div class="pull-left" style="margin:30px 0 0 120px;">
					<p>姓名：张三</p>
					<p>手机号：13999999999</p>
				</div>
			</div>
			<div class="item item-divider">
				<i class="fa fa-fw fa-download"></i> 文件下载
			</div>
			<div ng-click="vc.percentTimer()" class="item">
				<table width="100%">
					<tr>
						<td width="70">
							下载中:
						</td>
						<td>
							<div style="width:100%;height:8px;background:#ccc;border-radius:4px;">
								<div ng-style="{width:vo.percent+'%'}" class="progress"></div>
							</div>
						</td>
						<td class="right" width="50">
							{{vo.percent}}%
						</td>
					</tr>
				</table>
			</div>
			<div class="item item-divider">
				<i class="fa fa-fw fa-spinner"></i> 图标
			</div>
			<div class="item">
				<table class="loading-table" ng-show="vo.showLoading">
					<tr>
						<td><ion-spinner icon="android"></ion-spinner></td>
						<td><ion-spinner icon="ios"></ion-spinner></td>
					</tr>
					<tr>
						<td><ion-spinner icon="ios-small"></ion-spinner></td>
						<td><ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner></td>
					</tr>
					<tr>
						<td><ion-spinner icon="circles" class="spinner-energized"></ion-spinner></td>
						<td><ion-spinner icon="crescent" class="spinner-royal"></ion-spinner></td>
					</tr>
					<tr>
						<td><ion-spinner icon="dots" class="spinner-dark"></ion-spinner></td>
						<td><ion-spinner icon="lines" class="spinner-calm"></ion-spinner></td>
					</tr>
					<tr>
						<td><ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner></td>
						<td><ion-spinner icon="spiral"></ion-spinner></td>
					</tr>
				</table>
			</div>
		</div>
	</ion-content>

	<script id="progress.html" type="text/ng-template">
		<div  ng-style="{width:(screenWidth*0.5)+'px'}">
			<div class="center" ng-style="{color:vo.percent==100?'#32cd32':'white'}">
				<span ng-if="vo.percent!=100">文件上传中 {{vo.percent}}%</span>
				<span ng-if="vo.percent==100">文件上传完成 <i class="ion-checkmark-round"></i></span>
			</div>
			<div style="width:100%;height:8px;background:#ccc;margin-top:10px;border-radius:4px;">
				<div ng-style="{width:vo.percent+'%'}" class="progress" style=""></div>
			</div>
		</div>
	</script>
	<style type="text/css">
		.loading-table .spinner svg {
			width: 40px;
			height: 40px;
		}
		.loading-table{
			width:100%;text-align:center;
		}
		.loading-table tr{
			height:80px;line-height:80px;
		}

		.progress{
			transition: all .1s;
			height:8px;
			background-size: 20px 20px;
			border-radius:4px;
			background-color:#00aa00;
			background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			animation: progress-bar-stripes 2s linear infinite;
		}
		@keyframes progress-bar-stripes{
			from{background-position:40px 0}to{background-position:0 0}
		}

		.circle {
			width:100px;
			height:100px;
			position: absolute;
			border-radius: 50%;
			background: #32cd32;
		}
		.pie_left, .pie_right{
			width:100px;
			height:100px;
			position: absolute;
			border-radius: 50%;
			top: 0px;left: 0px;
			background:#ccc;
		}

		.pie_right{
			clip:rect(0,auto,auto,50px);
		}
		.pie_left{
			clip:rect(0,50px,auto,0);
		}
		.mask {
			width: 94px;
			height: 94px;
			border-radius: 50%;
			left: 3px;
			top: 3px;
			background: #FFF;
			position: absolute;
			text-align: center;
			line-height: 94px;
			font-size: 16px;
			background-size:94px 94px;
			transition: all 1s;
		}
	</style>
</ion-view>